<!--
  - Copyright (C) 2024
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，未经购买不得使用
  - 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
  - 一经发现盗用、分享等行为，将追究法律责任，后果自负
-->
<!--直播间顶部 信息显示-->
<template>
	<!-- 返回上一页 -->
	<view class="live-back-btn" :style="{ top: sysInfo.safeArea?.top + 24 + 'px' }" @tap="goBack" />
	<view class="live-top" :style="{ top: sysInfo.safeArea?.top + 10 + 'px' }">
		<image
			:style="{
				width: '54rpx',
				height: '54rpx',
				borderRadius: '54rpx',
				overflow: 'hidden'
			}"
			:src="shopInfo.imgUrl"
		/>
		<view class="live-info" @handle-tap="goShop">
			<text class="shop-name" :style="{ maxWidth: titleMaxW + 'px' }">
				{{ shopInfo.name }}
			</text>
			<text class="view-num">{{ liveViewNum }} 观看</text>
		</view>
		<text v-if="!isAnchor" class="follow-btn" @tap="onFollowShop">
			<text class="cuIcon-add"></text>
			{{ isFollowed ? '已关注' : '关注店铺' }}
		</text>
	</view>
</template>
<script>
export default {
	props: {
		sysInfo: {
			type: Object,
			default() {
				return {};
			}
		},
		shopInfo: {
			type: Object,
			default() {
				return {};
			}
		},
		liveInfo: {
			type: Object,
			default() {
				return {};
			}
		},
		liveViewNum: {
			type: Number,
			default: 0
		},
		/**
		 * 是否是主播
		 */
		isAnchor: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isFollowed: false,
			titleMaxW: 400
		};
	},
	mounted() {
		this.titleMaxW = this.sysInfo.windowWidth * 0.6;
	},
	methods: {
		onFollowShop() {
			const shopId = this.liveInfo.shopId;
			// this.isFollowed = res;
		},
		getShopInfo() {
			const shopId = this.liveInfo.shopId;
			// this.isFollowed = res;
		},
		goShop() {
			uni.navigateTo({
				url: '/pages/shop/shop-detail/index?id=' + this.liveInfo.shopId
			});
		},
		goBack() {
			uni.navigateBack();
		}
	}
};
</script>
<style lang="scss" scoped>
.live-back-btn {
	width: 22rpx;
	height: 22rpx;
	transform: rotate(-45deg);
	position: fixed;
	left: 30rpx;
	top: 42rpx;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	z-index: 999;
}

.live-top {
	position: fixed;
	display: flex;
	flex-direction: row;
	align-items: center;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 60rpx;
	left: 68rpx;
	top: 8rpx;
	padding: 10rpx;
	z-index: 100;
	.shop-icon {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50rpx;
		overflow: hidden;
	}
	.live-info {
		// max-width: 125rpx;
		padding: 0 23rpx 0 15rpx;

		.shop-name {
			lines: 1;
			overflow: hidden;
			/* #ifndef APP-PLUS-NVUE */
			white-space: nowrap;
			/* #endif */
			text-overflow: ellipsis;
			color: #fff;
			font-size: 26rpx;
		}
		.view-num {
			lines: 1;
			overflow: hidden;
			/* #ifndef APP-PLUS-NVUE */
			white-space: nowrap;
			/* #endif */
			text-overflow: ellipsis;
			color: #cbc5c2;
			font-size: 20rpx;
		}
	}
	.follow-btn {
		font-size: 22rpx;
		padding: 8rpx 16rpx;
		background-image: linear-gradient(151deg, #ff5252, #f82020);
		color: #fff;
		border-radius: 30rpx;
		/* #ifndef APP-PLUS-NVUE */
		white-space: nowrap;
		/* #endif */
	}
}
</style>
